<template>
    <div class="mac-window">
        <div class="title-bar" style="display: flex;">
            <div class="buttons">
                <span class="button close"></span>
                <span class="button minimize"></span>
                <span class="button zoom"></span>
            </div>
            <h1>&nbsp;&nbsp;&nbsp;&nbsp;HikerSystem</h1>
        </div>
        <div style="display: flex;">
          <div class="scrollable-sidebar">
            <br/>
            <p style="margin: 20px 3px 15px 3px;" >
                <router-link :to="'/home?UID=' + this.$route.query.UID" class="a"><img src="../assets/backspace.png" width="12" height="12"/>返回主页</router-link>
            </p>
            <p style="margin: 20px 3px 15px 3px; display: flex" >
                <router-link :to="'/create_team?UID=' + this.$route.query.UID" class="a"><img src="../assets/mine.png" width="12" height="12"/>创建队伍</router-link>
            </p>
            <p style="margin: 20px 3px 15px 3px; display: flex" >
                <router-link :to="'/join_team?UID=' + this.$route.query.UID" class="a"><img src="..\assets\new.png" width="12" height="12"/>加入队伍</router-link>
            </p>
            <p style="margin: 20px 3px 15px 3px; display: flex" >
                <router-link :to="'/application?UID=' + this.$route.query.UID" class="a"><img src="..\assets\documents.png" width="12" height="12"/>管理申请</router-link>
            </p>
            <p style="margin: 20px 3px 15px 3px; display: flex ;background-color: gray; border-radius: 0;" >
                <router-link :to="'/account?UID=' + this.$route.query.UID" class="a"style="color:aliceblue"><img src="..\assets\documents.png" width="12" height="12"/>我的信息</router-link>
            </p>
            
          </div>
          

    

          <div class="main-sidebar" style="display: grid; grid-template-columns: 1fr 1fr;">
            <div class="left-half">
                <br/><br/>
            <button @click="ChooseType(1)">设置新密码</button>
            <br/>
            <button @click="ChooseType(2)">修改用户名</button>
            </div>
            <form @submit.prevent="handleSubmit">
            <div v-if="type != 0">
                <div v-if="type == 1">
              <div>
                  <input type="password" id="originPassword" v-model="originPassword" required placeholder="验证原密码">
              </div>
              <div>
                  <input type="password" id="password" v-model="password" required placeholder="新密码">
              </div>
              <div>
                  <input type="password" id="confirmPassword" v-model="confirmPassword" required placeholder="确认密码">
              </div>
              </div>
                
              <div v-else>

                <div>
                  <input type="text" id="username" v-model="username" required placeholder="新用户名">
              </div>
              </div>
            <button type="submit">提交修改</button>
            </div>


          </form>

          </div>
        </div>
    </div>
</template>

<script>
const IP = 'http://47.113.197.249:8083';
import '../assets/mac.css';
import axios from 'axios';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
export default {
    setup() {
      const type = ref(0);
      const originPassword = ref('');
      const password = ref('');
      const confirmPassword = ref('');
      const username = ref('');
      const route = useRoute();
        
    const handleSubmit = () => {
    console.log(type);
      if (type.value == 1) {
        if (password.value !== confirmPassword.value) {
          alert('两次密码输入不一致');
          return;
        }else if (password.value === originPassword.value){
          alert('不能修改为原密码');
          return;
        }else if(password.value.length < 6){
          alert('密码过短，至少六位字符！');
          return;
        }
        const totalData = {
            userId: route.query.UID,
            oldPassword: originPassword.value,
            newPassword: password.value,
        }
        console.log(totalData);
        axios.post(IP + '/user/changePassword', totalData)
        .then(response => {
          console.log('sent');
          console.log(response);
          alert(response.data.data);
        })
        .catch(error => {
          console.log('发送出错：', error);
          alert('连接失败！请检查网络');
        });
        console.log('新密码:', password);
      } else if (type.value == 2) {
        if (username.value.length < 4 || username.value.length > 50){
          alert('新用户名不合法，请输入4~50个字符！');
          return;
        }
        const totalData = {
            userId: route.query.UID,
            newUsername: username.value,
        }
        console.log(totalData);
        axios.post(IP + '/user/changeUsername', totalData)
        .then(response => {
          console.log('sent');
          console.log(response);
          alert(response.data.data);
        })
        .catch(error => {
          console.log('发送出错：', error);
          alert('连接失败！请检查网络');
        });
        console.log('新用户名:', username);
      }
    }
    return {
        handleSubmit,
        type,
        originPassword,
        password,
        confirmPassword,
        username,
    }
  },

  methods: {
    ChooseType(type) {
      this.type = type;
      this.password = '';
      this.confirmPassword = '';
      this.username = '';
      this.originPassword = '';
    }
}
}
</script>



<style>
.a {
    display: inline-block;
    color:rgb(54, 54, 54);
    font-size: 16px;
    font-weight: bold;
    margin-right: 2vw;
}

</style>